<!--订单的页面，由于数据结构变化太大，所以抽离出来-->
<template>
    <div class="cart-citem " v-if="Object.keys(orderItem).length > 0">
        <div v-if="Array.isArray(orderItem.orderItemModels)">
            <div class="displayFlex" v-if="orderItem.orderItemModels.length ==1">
                <div class="cart-goods-wImg">
                    <img class="cart-goods-img" v-lazy="orderItem.orderItemModels[0].itemPhoto" alt="">
                </div>
                <div class="flex1 displayFlex goods-msg flex-wrap">
                    <div class="width-full">
                        <h6 class="width-full two-line-ellepsis item-title">
                            {{orderItem.orderItemModels[0].itemName}}
                        </h6>
                        <span class="cart-goods-style" v-if="orderItem.orderItemModels[0].styleName">
                            {{orderItem.orderItemModels[0].styleName}}
                        </span>
                        <!--这么暂时没有字段判断-->
                        <span v-if="false" class="warn-text displayBlock">
                            此商品为定制商品，暂不支持退款！
                        </span>
                    </div>
                    <div class="cart-goods-num displayFlex flex-algin-center width-full">
                        <span class="flex1 fontSize12"><span class="font-size10">￥</span>{{Math.ceil(orderItem.orderItemModels[0].itemPrice * 100) / 100}}</span>
                        <span>{{orderItem.orderItemModels[0].buyNum}}</span>
                    </div>
                </div>
            </div>
            <div v-else-if="orderItem.orderItemModels.length > 1">
                <!--<goods-box></goods-box>-->
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "orderItem",
        props: {
            orderItemProp: Object,
        },
        data() {
            return {
                orderItem: {
                    // "orderItemModels": [            //-------------订单商品列表
                    //     {
                    //         "itemId": 1787,         //------------商品ID
                    //         "itemPhoto": "item/20175_offline/113685234100.png",     //---------商品图片
                    //         "itemName": "哈哈，这个好",       //---------商品名称
                    //         "styleName": "",        //--------购买款式
                    //         "buyNum": 1,        //-------商品购买数量
                    //         "itemPrice": "8872.4"       //----------商品售价
                    //     }
                    // ],
                }
            }
        },
        mounted() {
            this.orderItem = Object.assign({}, this.orderItem, this.orderItemProp)
        },
        methods: {

        },
        watch: {
            orderItemProp(val) {
                this.orderItem = Object.assign({}, this.orderItem, val)
            }
        },
        components:{
            'goods-box':()=>import('../../../components/commonComponents/boxItem/GoodsBox'),
        }
    }
</script>


<style scoped lang="scss">
    .cart-citem {
        width: 100%;
        padding: .1rem 0;
    }

    .select-wImg {
        margin-right: .05rem;
    }

    .select-img {
        position: relative;
        width: .16rem;
    }

    .cart-goods-wImg {
        width: 1.2rem;
        height: 1.7rem;
        margin-right: .16rem;
    }

    .cart-goods-img {
        width: 1.2rem;
        height: 1.7rem;
        object-fit: cover;
        border-radius: .05rem;
    }

    .item-title {
        margin-bottom: .15rem;
        color: #333;
        line-height: .15rem;
    }

    .cart-goods-style {
        padding: .01rem .1rem;
        background-color: #f0f0f0;
        font-size: .12rem;
        color: #999;
        -webkit-border-radius: .12rem;
        -moz-border-radius: .12rem;
        border-radius: .12rem;
    }

    .icon-arrows_left {
        transform: rotate(-180deg);
    }

    .warn-text {
        padding-top: .1rem;
        font-size: .11rem;
        color: #FF3333;
    }

    .disabled-select {
        display: inline-block;
        width: .16rem;
        height: .16rem;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-color: #F0F0F0;
    }
</style>